<script lang="ts">
import { zip } from '@peng_kai/kit/libs/lodash-es';
import { ECharts } from '@peng_kai/kit/vue/components';
import * as echarts from 'echarts';
import { formatNumber } from '~/utils/number';
import SelectChartPeriod from './SelectChartPeriod.vue';

function useChartList() {
  const queryParams = reactive<Api.GetParam<typeof apis.apiInviteReferralsChartLine>>({
    time_type: 0,
    channel_id: '',
  });
  const referralChartQry = useQuery({
    queryKey: [apis.apiInviteReferralsChartLine.id, queryParams],
    queryFn: () =>
      apis.apiInviteReferralsChartLine(queryParams),
  });
  const referralChartData = computed(() => referralChartQry.data.value);
  const isEmpty = computed(() => !referralChartData.value?.axis_data?.length);
  const depositChecked = ref(true);
  const regChecked = ref(true);

  const echartsOption = computed(() => {
    const deposit_count = zip(referralChartData.value?.axis_data ?? [], referralChartData.value?.deposit_count ?? []);
    const reg_count = zip(referralChartData.value?.axis_data ?? [], referralChartData.value?.reg_count ?? []);

    const series = [];

    if (depositChecked.value) {
      series.push({
        name: $t('7jI2ofukzNdrbfWKyM3v'),
        type: 'line',
        stack: 'Total',
        smooth: true,
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(4, 126, 49 ,1)' },
            { offset: 1, color: 'rgba(38, 40, 47,0 )' },
          ]),
        },
        lineStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgb(121, 127, 145 )' },
            { offset: 1, color: 'rgb(34, 197, 94)' },
          ]),
          cap: 'round',
        },
        emphasis: {
          focus: 'series',
        },
        data: deposit_count,
      });
    }

    if (regChecked.value) {
      series.push({
        name: $t('zmCZyLtncPIch0JvpNhr'),
        type: 'line',
        stack: 'Total',
        smooth: true,
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(39, 78, 124)',
            },
            {
              offset: 1,
              color: 'rgb(39, 42, 50)',
            },
          ]),
        },
        lineStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgb(121, 127, 145 )' },
            { offset: 1, color: 'rgb(24, 189, 221)' },
          ]),
          cap: 'round',
        },
        emphasis: {
          focus: 'series',
        },
        data: reg_count,
      });
    }

    return {
      useUTC: true,
      locale: 'UTC',
      color: ['#80FFA5', '#00DDFF'],
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#26272E',
        borderColor: '#26272E',
        textStyle: {
          color: '#fff', // 自定义文字颜色
        },
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
        valueFormatter: (v: string) => `$${bignumber(formatNumber(v, 3)).toFormat()}`,
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '0',
        top: '0',
        containLabel: true,
      },
      xAxis: [
        {
          show: true,
          type: 'time',
          boundaryGap: false,
          axisLine: {
            show: false,
            lineStyle: {
              width: 2, // 设置轴线的宽度
              type: 'solid', // 设置轴线的类型（实线、虚线等）
            },
          },
          axisPointer: {
            show: true,
            label: {
              formatter: (attrs: any) => dayjs(attrs.value).format('YYYY-MM-DD'),
            },
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#31323b',
            },
          },
        },
      ],
      yAxis: [
        {
          show: false,
          type: 'value',
          axisLabel: {
            show: false, // 隐藏 x 轴刻度标签
          },
          axisTick: {
            show: false, // 隐藏 x 轴刻度线
          },
          boundaryGap: false,
          axisLine: { onZero: false },
        },
      ],
      series,
    };
  });

  return {
    referralChartQry,
    referralChartData,
    isEmpty,
    echartsOption,
    queryParams,
    depositChecked,
    regChecked,
  };
}
</script>

<script lang="ts" setup>
const { channelListForAntdSelectOptions } = queries.useInviteChannelQuery();
const { referralChartQry, referralChartData, isEmpty, queryParams, echartsOption, depositChecked, regChecked } = useChartList();
</script>

<template>
  <TCard>
    <template #header>
      <div class="w-full flex-between">
        {{ $t('72cBmkhZUlgYYrqv9UGx') }}
        <TAntdTheme component="Select" theme="light">
          <ASelect
            v-model:value="queryParams.channel_id"
            class="w-35" :virtual="false"
            :options="channelListForAntdSelectOptions"
          />
        </TAntdTheme>
      </div>
    </template>

    <template #default>
      <div class="grid grid-cols-[1fr_auto] gap-3">
        <TSuspenseView
          v-bind="buildSvPropsOfQuery(referralChartQry, { isEmptyFn: () => isEmpty })"
          class="relative" emptyClass="!p-0"
          :emptyMsg="$t('ouZm9W7zopH2PmKqleAix')"
        >
          <ECharts class="!abs-full isolate" :echartOption="echartsOption" />
        </TSuspenseView>

        <SelectChartPeriod v-model:value="queryParams.time_type" class="w-17" />

        <div v-if="!isEmpty" class="flex items-center justify-center gap-2 text-sm">
          <ACheckbox v-model:checked="depositChecked">
            <span :class="depositChecked ? 'text-sys-text-ter' : 'text-sys-text-body'">
              {{ $t('lRTe5boqbDMNt6vw8Up') }} {{ referralChartData?.total_deposit_count }}
            </span>
          </ACheckbox>
          <ACheckbox v-model:checked="regChecked">
            <span :class="regChecked ? 'text-sys-text-ter' : 'text-sys-text-body'">
              {{ $t('nfQghuB5m8YYHvkGp0zS') }}: {{ referralChartData?.total_reg_count }}
            </span>
          </ACheckbox>
        </div>
      </div>
    </template>
  </TCard>
</template>
